<template>
	<Popup
		title="上传交换玩具"
		btnText="发布交换"
		@clickBtn="onclickPublish"
		@close="$emit('close')"
	>
		<div class="upload">
			<Input
				class="input"
				placeholder="取个标题"
				border="3px solid #DEEAE8"
				bgColor="#fbfbfb"
				v-model="title"
			/>
			<Textarea
				class="input"
				placeholder="说说你的交换原因吧～"
				border="3px solid #DEEAE8"
				height="130"
				v-model="reason"
			/>
			<Input
				class="input"
				placeholder="说说你的交换条件吧～"
				bgColor="#fbfbfb"
				border="3px solid #DEEAE8"
				v-model="condition"
			/>
			<div class="list">
				<ChooseFile
					class="choose-file"
					@change="selectFiles"
				>
					<Tag
						width="182px"
						height="182px"
						bgColor="#FBFBFB"
						color="#00C9A9"
						border="3px solid #DEEAE8"
					>
						<div>
							<Iconfont
								name="icon-a-Group2"
								size="50"
								color="#00C9A9"
							/>
							<div style="margin-top: 21px;">上传图片/视频</div>
						</div>
					</Tag>
				</ChooseFile>
				<Tag
					width="182px"
					height="182px"
					bgColor="#FBFBFB"
					border="3px solid #DEEAE8"
					padding="0"
					v-for="src in imgs"
					:key="src"
				>
					<img
						:src="src"
						@click="onclickImg(src)"
					>
				</Tag>
			</div>
		</div>
	</Popup>
</template>

<script>
import { fileToUrl } from '@/utils/file'

export default {
  data() {
    return {
      title: '',
      reason: '',
      condition: '',
      imgs: []
    }
  },
  methods: {
    selectFiles(e) {
      this.imgs = this.imgs.concat(e.map(item => fileToUrl(item)))
      console.log(e)
    },
    onclickImg(src) {
      window.open(src)
    },
    onclickPublish() {
      this.$emit('nextStep')
    }
  }
}
</script>

<style lang='scss' scoped>
.upload {
  width: 700px;
  max-height: 60vh;
  padding: 30px 50px 0 50px;
  overflow-y: auto;

  .input {
    margin-bottom: 20px;
  }

  .list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;

    .choose-file {
      cursor: pointer;
    }

    img {
      width: 100%;
      object-fit: contain;
    }
  }
}
</style>
